<template>
  <div class="in-number"  v-if="payIndex=== 2">
    <div class="amount" v-if="recordArr.length != 0">
      <view class="amount-child">
        <div class="amount-characters">
          账户余额
        </div>
        <div class="amount-quantity">
          ￥{{accountBalance}}
        </div>
      </view>
      <div class="tabulation-tab">
<!--        <div class="tag">-->
<!--          全部-->
<!--        </div>-->
<!--        <div class="tag">-->
<!--          灵活保单-->
<!--        </div>-->
<!--        <div class="tag">-->
<!--          月保单-->
<!--        </div>-->
        <img class="vessel" src="@/static/longInsurance-detail/vessel.png" v-if="recordArr.length != 0" alt="">
      </div>
    </div>
    <no-Data v-if="recordArr.length == 0"></no-Data>
    <div class="content-list">
      <div class="amount-list" v-for="(item,index) in recordArr" :key="index">
        <div class="dot-line">
          <div class="element1">
            <div class="child1"></div>
          </div>
          <div class="grey-line" v-if="index !== recordArr.length-1">
          </div>
        </div>
        <div class="line-box">
          <div class="amount-box">
            <div class="amount-time">
              {{item?.payDate}}
            </div>
          </div>
          <div class="content-box">
            <div class="content-quantum">
              <div class="quantum-title">{{item.status}} <text class="blue" v-if="item.type==='已充值' && item.status == '充值'">{{ item.type}}</text><text v-if="item.type==='已驳回'" class="red">{{ item.type}}</text><text v-if="item.type==='待确认'" class="green">{{ item.type}}</text></div>
              <div class="quantum-digit bord">￥{{item?.rechargeAmount}}</div>
            </div>
            <div v-if="item.operatorType != ''" class="quantum-title f12">操作类型：<text class="quantum-digit">{{ item.operatorType}}</text></div>
            <div v-if="item.bankName != '' && item.type !== '已驳回'" class="quantum-title f12">收款账户：<text class="quantum-digit">{{ item.bankName}}</text></div>
<!--            <div class="effective-while">-->
<!--              <div class="quantum-title">-->
<!--                生效时间：-->
<!--              </div>-->
<!--              <div class="quantum-digit">-->
<!--                2022-11-23-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { dateFormat } from '@/utils/util'
// import tabCapsule from '@/components/tab-capsule/tab-capsule.vue'
// import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { insuranceRechargeRecord } from '@/api/signing'
import { LOGICAL_OPERATORS } from '@babel/types'

// eslint-disable-next-line vue/no-setup-props-destructure
const { company, payIndex } = defineProps(['company', 'payIndex'])

onLoad(async (options) => {
    console.log(options, 'options22222222222222222222222')
    companyId.value = options.id
    uni.$on('onReachBottom3', () => {
        onBottom()
    })
    await rechargeRecord()
})

// onShow(async () => {
//     console.log(dateFormat('mm-dd--HH-MM', new Date("2023-05-15T00:00:00.000+0800")), '1111111111111')
//     await rechargeRecord()
// })

const pageNum = ref(1)
const companyId = ref()
const capsuleIndex = ref(0)
const piePeople = ref([] as any)
const pieMoney = ref([] as any)
const chartsDataPie1 = ref({
    series: [{
        data: []
    }]
})
const otherDataInfo = ref({} as any)
// console.log(company, '公司id是啥来着')
const recordArr = ref([] as any)
const hasNextPage = ref(false)
const accountBalance = ref()
const rechargeRecord = async function () {
    try {
        const result = await insuranceRechargeRecord({
            companyId: companyId.value,
            pageNum: pageNum.value,
            pageSize: 10,
            type: 1
        })
        console.log(result, '充值记录的内容是什么111')
        if (result.wesureAccountBalanceRecordList.hasNextPage === false) {
            hasNextPage.value = false
        } else {
            hasNextPage.value = true
        }
        accountBalance.value = result.accountBalance
        recordArr.value = [...recordArr.value, ...result.wesureAccountBalanceRecordList.list.map((item:any) => {
            item.payDate = dateFormat('mm月dd日  HH:MM', new Date(item.payDate))
            return item
        })]
        console.log(accountBalance.value, 'accountBalancevalue111111111111111111111111111')
        console.log(recordArr.value, '哈哈哈哈哈哈哈')
    } catch {
    }
}

const onBottom = function () {
    if (hasNextPage.value === true) {
        pageNum.value++
        rechargeRecord()
    }
}
</script>

<style lang="scss" scoped>
.in-number{
  //margin: 40rpx 30rpx 0 30rpx;
}
.amount{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 30rpx;
  .amount-child{
    padding-top: 25rpx;
  }
  .amount-characters{
    font-size: $font-normal;
    font-weight: 400;
    color: #9497B1;
    line-height: 34rpx;
  }
  .amount-quantity{
    font-size: 58rpx;
    font-weight: normal;
    color: $black;
    margin-top: 16rpx;
    font-weight: bold;
  }
  .tabulation-tab{
    display: flex;
    align-items: center;
    .tag{
      text-align: center;
      min-width: 128rpx;
      font-size: 24rpx;
      font-weight: normal;
      color: #565868;
      padding: 8rpx 0 10rpx 0;
    }
  }
}

.content-list{
  //margin-top: 30rpx;
  background: #FFF;
  border-radius: 16rpx;
  padding: 24rpx 0;
  box-sizing: border-box;
  margin: 40rpx 30rpx 0 30rpx;
  padding-bottom: 100rpx;
}

.amount-list{
  padding: 0rpx 30rpx;
  display: flex;
}

.dot-line{
  flex-direction: row;
  justify-content: center;
}
.grey-line{
  width: 1rpx;
  height: 240rpx;
  border-left: 1rpx solid #DEE0E3;
  margin: 6rpx 0 6rpx 16rpx;
}

.element1{
  width: 30rpx;
  height: 30rpx;
  background-color: #FFF;
  border-radius: 50%;
  border: 3rpx solid #DEE0E3;
  position: relative;
}
.child1{
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #DEE0E3;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;
}

.amount-box{
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 400;
  color: #202536;
  .amount-time{
    margin-bottom: 5rpx;
  }
}

.line-box{
  height: 220rpx;
  margin-left: 20rpx;
  box-sizing: border-box;
  //border-left: 1px solid #DEE0E3;
  .content-box{
    margin-top: 35rpx;
    width: 580rpx;
    background: $white;
    border-radius: 16rpx;
    opacity: 1;
    padding: 30rpx 24rpx 32rpx;
    font-size: 28rpx  ;
    box-sizing: border-box;
  }
}

.content-quantum,.effective-while{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.effective-while{
  margin-top: 24rpx;
}

.quantum-title{
  color: #9497B1;
  font-size: $font-normal;
}
.quantum-digit{
  color: $black;
}

.vessel{
  width: 270rpx;
  height: 150rpx;
}
.f12{
  font-size: 24rpx;
}
.blue{
  color: #3e5ff5;
}
.bord{
  font-weight: 700;
}
</style>
